---
import { Icon } from '@astrojs/starlight/components';
import type { StarlightIcon } from '@astrojs/starlight/types';
import SidebarPersister from '@astrojs/starlight/components/SidebarPersister.astro';
import SidebarSublist from '@astrojs/starlight/components/SidebarSublist.astro';
import MobileMenuFooter from './MobileMenuFooter.astro';

type SidebarEntry = App.Locals['starlightRoute']['sidebar'][number];

const { sidebar } = Astro.locals.starlightRoute;

type Group = Extract<SidebarEntry, { type: 'group' }>;
function assertGroups(sidebar: SidebarEntry[]): asserts sidebar is Group[] {
	for (const entry of sidebar) {
		if (entry.type !== 'group') {
			throw new Error('Top-level links are not permitted in the docs sidebar.');
		}
	}
}
assertGroups(sidebar);

const makeId = (label: string) => 'sidebar-section-' + label.toLowerCase().replaceAll(/\s+/g, '-');

const isCurrent = (sidebar: SidebarEntry[]): boolean =>
	sidebar
		.map((entry) => (entry.type === 'link' ? entry.isCurrent : isCurrent(entry.entries)))
		.some((entry) => entry === true);
---

<SidebarPersister {...Astro.props}>
	<nav class="sidebar-sections" aria-label="Documentation sections">
		{
			sidebar.map(({ label, entries, badge }) => {
				const sectionId = makeId(label);
				const isExpanded = isCurrent(entries);
				
				return (
					<details class="sidebar-section" open={isExpanded}>
						<summary class="section-header">
							<div class="section-title">
								<Icon class="section-icon" name={badge?.text as StarlightIcon} />
								<span class="section-label">{label}</span>
							</div>
							<svg class="caret" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
								<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</summary>
						<div class="section-content" id={sectionId}>
							<SidebarSublist sublist={entries} />
						</div>
					</details>
				);
			})
		}
	</nav>
</SidebarPersister>

<div class="md:sl-hidden">
	<MobileMenuFooter {...Astro.props} />
</div>

<div class="desktop-footer sl-hidden md:sl-block"></div>

<style>
	:global(.fallback)::after {
		content: 'EN';
		vertical-align: super;
		font-size: 0.75em;
		font-weight: 700;
	}

	.desktop-footer {
		margin-top: auto;
	}

	:global(.sidebar-pane) {
		overflow-y: scroll;
	}

	.sidebar-sections {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.sidebar-section {
		border: 1px solid var(--sl-color-hairline-light);
		border-radius: 0.5rem;
		background-color: var(--sl-color-gray-7, var(--sl-color-gray-6));
		overflow: hidden;
	}

	:global([data-theme='dark']) .sidebar-section {
		background-color: var(--sl-color-black);
	}

	@media (min-width: 50rem) {
		:global([data-theme='dark']) .sidebar-section {
			background-color: var(--sl-color-gray-7);
		}
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem 1rem;
		cursor: pointer;
		user-select: none;
		list-style: none;
		color: var(--sl-color-white);
		font-weight: 600;
		line-height: var(--sl-line-height-headings);
	}

	.section-header::-webkit-details-marker,
	.section-header::marker {
		display: none;
	}

	.section-header:hover {
		background-color: var(--sl-color-gray-6);
	}

	:global([data-theme='dark']) .section-header:hover {
		background-color: var(--sl-color-gray-6);
	}

	.section-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.section-icon {
		width: 1.25rem;
		height: 1.25rem;
		color: var(--sl-color-text-accent);
		flex-shrink: 0;
	}

	.section-label {
		color: var(--sl-color-white);
	}

	.caret {
		width: 1rem;
		height: 1rem;
		color: var(--sl-color-gray-3);
		transition: transform 0.2s ease;
		flex-shrink: 0;
	}

	.sidebar-section[open] .caret {
		transform: rotate(90deg);
	}

	.section-content {
		padding: 0 0.5rem 0.5rem;
	}

	.section-content :global(ul) {
		margin-top: 0;
	}
</style>
